import React, { memo, useState } from 'react'
import { AlbumItemWrapper } from "./style";

export default memo(function AlbumItem(props) {
    const { name, picUrl, artist } = props;
    const [isHover, setHover] = useState(false);
    return (
        <AlbumItemWrapper url={`${picUrl}??param=100y100`}>
            <div className="album-item-top">
                <div className="album-item-img"></div>
                <div className={isHover ? "album-item-play recommend_hot_item_icon": "album-item-play"}></div>
                <div className="album-item-modal recommend_hot_item_image" onMouseOver={() => setHover(true)}
                onMouseOut={() => setHover(false)}></div>
                
                {/* <div className="album-item-play recommend_hot_item_icon"></div> */}
            </div>
            <div>
                <div className="album-item-title text-nowrap">{name}</div>
                <div className="album-item-desc text-nowrap">{artist.name}</div>
            </div>
        </AlbumItemWrapper>
    )
})
